import { getDepartment_ranking } from '@/api/DataOperate'

import EchartsModule from '@/views/components/EchartsModule'

import Mytable from '@/views/components/Mytable/index'

import { chartFontSize } from '@/utils/rem.ts'

import { getCardPlanTrend } from '@/api/home.ts'

import * as echarts from 'echarts/core'

import dayjs from 'dayjs'

import React from 'react'

import { useEffect, useState } from 'react'

const Requirements = () => {
  const [lineData, setLineData] = useState<any>([])

  const [tableData, settableData] = useState([])

  const echartsRef = React.createRef()

  const colors = ['#2080F0', '#0CB7B6']

  const columns = [
    {
      title: '项目名称',
      dataIndex: 'project_name',
      key: 'project_name',
      render: (text: any) => <span style={{ color: '#2080F0' }}>{text}</span>
    },

    {
      title: '交付时间',
      dataIndex: 'project_type',
      key: 'project_type',
      ellipsis: true,
      render: (name: any) => <span>{name === '' ? '--' : name}</span>
    },

    { title: '超时时长', dataIndex: 'count', key: 'count' }
  ]

  const categoryOption: any = {
    color: colors,
    grid: {
      top: chartFontSize(14),
      left: chartFontSize(40),
      right: chartFontSize(30),
      bottom: chartFontSize(60)
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false
      },
      data: lineData.reduce((acc: any, item: any) => [...new Set([...item.data.map((it: any) => it.name), ...acc])], [] as string[])
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    legend: {
      show: true,
      bottom: chartFontSize(4),
      left: 'center',
      orient: 'horizontal',
      icon: 'circle',
      itemHeight: chartFontSize(10)
    },
    tooltip: {
      trigger: 'item'
    },
    series: lineData.map((line: any, index: any) => ({
      name: line.name,
      type: 'line',
      areaStyle: {
        opacity: 0.35,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: `${colors[index]}ff`
          },
          {
            offset: 1,
            color: `${colors[index]}00`
          }
        ])
      },
      smooth: true,
      emphasis: {
        label: {
          show: false
        }
      },
      data: line.data
    }))
  }

  enum lineName {
    finished = '完成',
    received = '新增'
  }
  //需求订单完成情况
  const Demandorderfinish = () => {
    const echartsRef = React.createRef()

    const seriesData: any = [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        center: ['48%', '75%'],
        radius: '100%',
        min: 0,
        max: 1,
        splitNumber: 8,
        axisLine: {
          lineStyle: {
            width: 6,
            color: [
              [0.25, '#FF6E76'],
              [0.5, '#FDDD60'],
              [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ]
          }
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '20%',
          width: '10%',
          offsetCenter: [0, '-40%'],
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          length: 12,
          lineStyle: {
            color: 'auto',
            width: 2
          }
        },
        splitLine: {
          length: 20,
          lineStyle: {
            color: 'auto',
            width: 5
          }
        },
        axisLabel: {
          color: '#464646',
          fontSize: 16,
          distance: -60,
          rotate: 'tangential',
          formatter: function (value: any) {
            if (value === 1) {
              return '100%'
            } else if (value === 0.5) {
              return '50%'
            } else if (value === 0.0) {
              return '0%'
            }
            return ''
          }
        },
        title: {
          offsetCenter: [0, '-10%'],
          fontSize: 16
        },
        detail: {
          fontSize: 18,
          offsetCenter: [0, '-35%'],
          valueAnimation: true,
          formatter: function (value: any) {
            return Math.round(value * 100) + ''
          },
          color: 'inherit'
        },
        data: [
          {
            value: 0.8,
            name: 'Grade Rating'
          }
        ]
      }
    ]
    return (
      <div className=" flex">
        <div className="w-68% h-240px">
          <EchartsModule onRef={echartsRef} seriesData={seriesData}></EchartsModule>
        </div>
        <div className="demandfinishTitle w-10%">
          <div className="flex">
            <span className="text-base mr-16px min-w-128px">订单整体完成情况</span>
            <span className="text-lg font-bold">34%</span>
          </div>
          <div className="flex py-20px">
            <span className="text-base mr-16px min-w-128px">需求完成量</span>
            <span className="text-lg font-bold">3464</span>
          </div>
          <div className="flex">
            <span className="text-base mr-16px min-w-128px">需求总量</span>
            <span className="text-lg font-bold">8053</span>
          </div>
        </div>
      </div>
    )
  }

  const Demandorderdeliver = () => {
    const echartsRef = React.createRef()
    const data = [
      { value: 500, name: 'Series1', itemStyle: { color: '#1FCAC9' } },
      { value: 310, name: 'Series2', itemStyle: { color: 'rgba(31, 202, 201, 0.24)' } }
    ]
    const options = {
      title: {
        text: '980%',
        subtext: '正常',
        left: '30%',
        top: '30%',
        textAlign: 'center',
        itemGap: 6,
        textStyle: {
          fontSize: chartFontSize(28),
          color: '#2C2C2C',
          fontFamily: 'MicrosoftYaHei'
        },
        subtextStyle: {
          fontSize: chartFontSize(16),
          color: '#2C2C2C',
          fontFamily: 'MicrosoftYaHei'
        }
      },
      tooltip: {
        trigger: 'item'
      }
    }
    const seriesData: any = [
      {
        type: 'pie',
        radius: ['46%', '54%'],
        center: ['30%', '40%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: data
      }
    ]
    return (
      <>
        <div className="flex">
          <div className="w-50% h-220px">
            <EchartsModule onRef={echartsRef} seriesData={seriesData} options={options}></EchartsModule>
            <div className="ml-40px black-xs">共计 3224个</div>
          </div>
          <div className="w-50% h-220px">
            <EchartsModule onRef={echartsRef} seriesData={seriesData} options={options}></EchartsModule>
            <div className="ml-40px black-xs">共计 3224个</div>
          </div>
        </div>
      </>
    )
  }

  useEffect(() => {
    const nowTime = dayjs()
    getCardPlanTrend({
      month_min: nowTime.subtract(5, 'month').format('YYYY-MM'),
      month_max: nowTime.format('YYYY-MM')
    }).then((res) => {
      setLineData([
        {
          name: lineName['received'],
          data: res.received.map((item) => ({
            name: item.month,
            value: item.count
          }))
        },
        {
          name: lineName['finished'],
          data: res.finished.map((item) => ({
            name: item.month,
            value: item.count
          }))
        }
      ])
    })
    getDepartment_ranking({
      time_min: '2023-11-1',
      time_max: '2023-11-1'
    }).then((res) => {
      res.forEach((item: any, index: any) => {
        item.key = index + 1
        item.name = item.department.name
        item.rate = item.rate * 100
      })
      settableData(res)
    })
  }, [])

  return (
    <>
      <div className="text-base font-bold py-24px">需求订单完成情况</div>
      <Demandorderfinish />
      <div className="flex justify-between">
        <div className="text-base font-bold py-24px">需求按时交付情况</div>
        <div className="black-xs py-24px">累计时间：2023-10-01</div>
      </div>
      <Demandorderdeliver />
      <div className="text-base font-bold py-60px">近半年交付需求数量变化趋势</div>
      <div className="w-100% h-220px">
        <EchartsModule onRef={echartsRef} seriesData={lineData} options={categoryOption}></EchartsModule>
      </div>
      <div className="flex justify-between">
        <div className="text-base font-bold py-24px">异常订单预警</div>
        <div className="black-xs py-24px">预警时间：2023-10-01</div>
      </div>
      <Mytable columns={columns} maxHeight={310} data={tableData} />
    </>
  )
}
export default Requirements
